<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="ArrowUpBold" @click="up">上</el-button>
      <el-button type="primary" icon="ArrowDownBold" @click="down">下</el-button>
      <el-button type="primary" icon="ArrowLeftBold" @click="left">左</el-button>
      <el-button type="primary" icon="ArrowRightBold" @click="right">右</el-button>
    </el-button-group>

    <el-drawer
      v-model="drawer"
      title="I am the title"
      :direction="dt"
      :before-close="handleClose"
      :show-close="false"
      :with-header="false"
      size="50%"
    >
      <div>Hi, thereaaaaaaaaaaaaaaaaaaaaaaaaaaa!</div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, reactive } from "vue";
const drawer = ref(false);

const dt = ref("ltb");

const up = () => {
  dt.value = "ttb ";
  drawer.value = true;
};
const down = () => {
  dt.value = "btt ";
  drawer.value = true;
};
const left = () => {
  dt.value = "ltr";
  drawer.value = true;
};
const right = () => {
  dt.value = "rtl";
  drawer.value = true;
};
</script>
<style lang="scss" scoped>
.el-drawer__body {
  overflow: auto;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>
